<template>
  <div class="organization">
    <!-- 按钮 -->
    <div class="top-button">
      <div style="float:right;">
        <el-button :style="button1" @click="addDialog = true">添加机构</el-button>
        <el-button :style="button2" @click="addMoreDialog = true">批量导入</el-button>
        <el-button :style="button3">导出机构</el-button>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="search-wrap">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col>
          <el-radio-group v-model="listQuery.radio">
            <el-radio-button label="正式机构"/>
            <el-radio-button label="加入机构"/>
            <el-radio-button label="退出记录"/>
          </el-radio-group>
          <el-input v-model="listQuery.input" style="width:260px" placeholder="请输入用户名/邮箱/手机号"/>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <div class="table-wrap">
      <el-table :data="tableData" border>
        <el-table-column type="selection" align="center"/>
        <el-table-column label="机构" align="center" min-width="30">
          <template slot-scope="scope">
            <img :src="scope.row.url" alt>
            <span class="title">{{ scope.row.title }}  <span v-if="scope.row.remark"> ({{ scope.row.remark }})</span></span>
          </template>
        </el-table-column>
        <el-table-column label="加入时间" prop="joinTime" align="center" min-width="20"/>
        <el-table-column label="课程包有效期" prop="utilTime" align="center" min-width="15"/>
        <el-table-column label="操作" align="center" min-width="25">
          <template slot-scope="scope">
            <el-dropdown
              split-button
              type="primary"
              @click="handleClick(scope)"
              @command="handleCommandClick($event,scope)"
            >
              查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">发私信</el-dropdown-item>
                <el-dropdown-item command="2">备注</el-dropdown-item>
                <el-dropdown-item command="3">关注</el-dropdown-item>
                <el-dropdown-item command="4">移除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10,20, 30, 50, 100]"
      :page-size="10"
      :total="100"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 查看弹窗 -->
    <view-dialog :visible-dialog="viewDialog" @closeView="viewDialog = false"/>
    <!-- 私信弹窗 -->
    <message-dialog :visible-dialog="messageDialog" @closeMessage="messageDialog = false"/>
    <!-- 备注弹窗 -->
    <remark-dialog :visible-dialog="remarkDialog" @closeRemark="remarkDialog = false"/>
    <!-- 添加机构弹窗 -->
    <add-dialog :visible-dialog="addDialog" @closeAdd="addDialog = false"/>
    <!-- 批量添加弹窗 -->
    <more-dialog :visible-dialog="addMoreDialog" @closeAddMore="addMoreDialog = false"/>
  </div>
</template>

<script>
import viewDialog from './organization/viewDialog'
import messageDialog from './organization/messageDialog'
import RemarkDialog from './organization/remarkDialog'
import addDialog from './organization/addDialog'
import MoreDialog from './organization/addMoreDialog'
export default {
  components: {
    viewDialog,
    messageDialog,
    RemarkDialog,
    addDialog,
    MoreDialog
  },
  data() {
    return {
      currentPage: 1,
      viewDialog: false,
      messageDialog: false,
      remarkDialog: false,
      addDialog: false,
      addMoreDialog: false,
      listQuery: {
        input: '',
        radio: '正式机构'
      },
      tableData: [
        {
          title: '刘豆豆',
          url: '/src/icons/title.png',
          remark: '教育添加'
        },
        {
          title: '刘豆豆',
          url: '/src/icons/title.png'
        },
        {
          title: '刘豆豆',
          url: '/src/icons/title.png'
        },
        {
          title: '刘豆豆',
          url: '/src/icons/title.png'
        }
      ],
      button1: {
        backgroundColor: '#409eff',
        borderColor: '#409eff',
        color: '#fff'
      },
      button2: {
        backgroundColor: '#3dd264',
        borderColor: '#3dd264',
        color: '#fff'
      },
      button3: {
        backgroundColor: '#2acff8',
        borderColor: '#2acff8',
        color: '#fff'
      }
    }
  },
  methods: {
    handleClick(scope) {
      this.viewDialog = true
    },
    handleCommandClick(command, scope) {
      if (command === '1') {
        this.messageDialog = true
      }
      if (command === '2') {
        this.remarkDialog = true
      }
      if (command === '4') {
        this.$confirm('是否确定移除该机构', '移除机构', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // write your delete operate
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          // write your cancel operate
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
      }
    },
    handleSizeChange(val) {
      // console.log(val)
      // this.currentpage = 1
      // this.pagesize = val.value
    },
    handleCurrentChange(val) {
      // console.log(val)
      // this.currentpage = val.value
    }
  }
}
</script>

<style lang="scss" scoped>
.organization {
  .top-button {
    width: 100%;
    height: 70px;
    line-height: 70px;
    background-color: #e6e9ed;
    .el-button {
      margin: 0;
      margin-right: 10px;
    }
    .el-button:hover {
      opacity: 0.8;
    }
  }
  .search-wrap {
    width: 100%;
    margin: 20px 0;
    .el-radio-group {
      vertical-align: top;
    }
  }
  .table-wrap {
    width: 100%;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      vertical-align: middle;
      margin-left: -20px;
    }
    .title {
      margin-left: 20px;
    }
  }
  .el-pagination {
    margin-top: 30px;
  }
}
</style>
